<template>
    <div class="home-recommend">
        <h2 class="recommend-title">
            <img class="recommend-title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="猜你喜欢">
            猜你喜欢
        </h2>
        <ul>
            <li v-for="item of recommendList" :key="item.id" class="recommend-info">
                <div class="recommend-img">
                    <img class="info-img" :src="item.imgUrl" />
                </div>
                <div class="recommend-content">
                    <h3 class="info-title">{{ item.title }}</h3>
                    <p class="info-desc">{{ item.desc }}</p>
                    <div class="info-price"><span class="price">￥<b class="price-num">199</b></span>起</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style scoped>
  .recommend-title {
      font-size: 0.32rem;
      height: .8rem;
      line-height: .8rem;

  }
  .recommend-title-img {
      margin-left: .2rem;
      width: .3rem;
      height: .3rem;
      vertical-align: baseline;
  }
  .recommend-info {
      padding: .2rem .2rem;
      border-bottom: .02rem solid #f6f6f6;
  }
  .recommend-img {
      width: 2rem;
      height: 2rem;
      float: left;
  }
  .info-img {
      width: 100%;
  }
  .recommend-content {
      height: 2rem;
      overflow: hidden;
      padding-left: .2rem;
  }
  .info-title {
      font-size: 0.32rem;
      margin-top: .2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .info-desc {
      color: #999;
      margin: .1rem 0;
      height: .8rem;
      line-height: .4rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }
  .info-price{
      color: #666;
      font-size: .24em;
  }
  .price {
      color: #ff8300;
  }
  .price-num {
      font-size: .4rem;
  }
</style>
